<template>
  <div class="Popularsonglist">
    <h1>热门歌单推荐</h1>
    <div class="resultsp">
      <ul>
        <li v-for="(item,index) in results" :key="index">
          <div class="ref_lt">
            <img :src="item.picUrl" alt="" />
          </div>
          <div class="ref_rt">
           {{item.name}}
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  
  props: {
    results: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {};
  },
  created(){
      console.log("推荐歌单",this.results);
  }
};
</script>

<style lang="less" scoped>
.Popularsonglist {
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.14rem;
  h1 {
    color: #ffcd32 !important;
  }
  .resultsp{
      ul{
          li{
              display: flex;
              align-items: center;
        padding: 0 .2rem .2rem .2rem;
            .ref_lt{
                width: .6rem;
                img{
                    display: block;
                    width: 100% !important;
                }
            }  
            .ref_rt{
              
                  margin-bottom: 10px;
                  color: #fff;
                  font-size: .12rem!important;
                  flex: 1;
                   text-indent: .2rem;
                  text-align:left!important;
                 
            
            }
          }
      }
  }
}
</style>
